<template>
  <div class="good-item-tabbar">
    <tab-bar>
      <tab-bar-item class="common-itemw">
        <i slot="active-icon" class="el-icon-chat-dot-round"></i>
        <i slot="icon" class="el-icon-chat-dot-round"></i>
        <span slot="context">客服</span>
      </tab-bar-item>
      <tab-bar-item>
        <i slot="active-icon" class="el-icon-school"></i>
        <i slot="icon" class="el-icon-school"></i>
        <span slot="context">店铺</span>
      </tab-bar-item>
      <tab-bar-item>
        <i slot="active-icon" class="el-icon-star-off"></i>
        <i slot="icon" class="el-icon-star-off"></i>
        <span slot="context">收藏</span>
      </tab-bar-item>
      <tab-bar-item class="add-cart">
        <!-- <i slot="active-icon" class="el-icon-chat-dot-round"></i>
        <i slot="icon" class="el-icon-chat-dot-round"></i> -->
        <span slot="context" @click="addCart">加入购物车</span>
      </tab-bar-item>
      <tab-bar-item class="pay">
        <!-- <i slot="active-icon" class="el-icon-chat-dot-round"></i>
        <i slot="icon" class="el-icon-chat-dot-round"></i> -->
        <span slot="context">购买</span>
      </tab-bar-item>
    </tab-bar>
  </div>
</template>

<script>
import TabBar from "@/components/common/tabbar/tabBar.vue";
import TabBarItem from "@/components/common/tabbar/tabBarItem.vue";
export default {
  name: "gooditemtabbar",
  components: {
    TabBar,
    TabBarItem,
  },
  methods: {
    addCart() {
      // 点击加入购物车，将商品存入用户的购物数据表
      console.log("点击将商品加入购物车");
      // console.log(this.$route.query.item)
      let item = this.$route.query.item;
      // let item = {
      //   title: "柳丝木旗舰店",
      //   gid:'002',
      //   shopKeeper: "柳丝木旗舰店",
      //   shopIcon: "店铺图标",
      //   activity: "3.8 20点开抢，每满200减20",
      //   image:
      //     "https://s5.mogucdn.com/mlcdn/c45406/200722_198lc5dfh935l81e5gag7ag7dj5ib_640x960.jpg",
      //   goodsTitle: "柳丝木防晒霜水感清透",
      //   slected: "37,米白色",
      //   content: "50g",
      //   price: 49.9,
      //   ischecked:false
      // };
      this.$store.dispatch("a_addCart", item);
    },
  },
};
</script>

<style scoped>
.good-item-tabbar {
  position: sticky;
  z-index: 9;
}
.add-cart {
  flex: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: yellow;
}
.pay {
  flex: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tint-color);
}
</style>